<template>
	<view>
		<!-- 自定义导航 -->
		<uni-nav-bar left-icon="back" rightIcon="search" :title="title" statusBar @clickLeft="backTo()"></uni-nav-bar>
		<!-- 排行榜前三 -->
		<view v-if="list">
			<view class="hot" v-if="list.length>=3">
				<!-- 2 -->
				<view @click="toDetail(list[1].id)">
					<view class="tag tag-two">2</view>
					<image :src="list[1].cover" mode="widthFix" class="cover"></image>
					<view>
						<view class="single">{{ list[1].name }}</view>
						<view style="font-size: 20rpx;color: #ff604f;">{{ list[1].people_counts }}人在追</view>
					</view>
				</view>
				<!-- 1 -->
				<view @click="toDetail(list[0].id)">
					<view class="tag tag-one">1</view>
					<image
						:src="list[0].cover"
						mode="widthFix"
						style="width: 200rpx;border-radius: 0 10rpx 10rpx 0;"
					></image>
					<view>
						<view class="single">{{ list[0].name }}</view>
						<view style="font-size: 20rpx;color: #ff604f;">{{ list[0].people_counts }}人在追</view>
					</view>
				</view>
				<!-- 3 -->
				<view @click="toDetail(list[2].id)">
					<view class="tag tag-three">3</view>
					<image :src="list[2].cover" mode="widthFix" class="cover"></image>
					<view>
						<view class="single">{{ list[2].name }}</view>
						<view style="font-size: 20rpx;color: #ff604f;">{{ list[2].people_counts }}人在追</view>
					</view>
				</view>
			</view>
		</view>
		<!-- 其他 -->
		<view style="padding: 40rpx 10rpx;">
			<view class="searchList" v-for="(item,index) in other" :key="index" @click="toDetail(item.id)">
				<view class="topone">{{list.length>=3?index+4:index+1}}</view>
				<image :src="item.cover" class="cover" style="width: 140rpx;" mode="widthFix"></image>
				<view>
					<view>{{item.name}}</view>
					<view>{{item.desc}}</view>
					<view>{{item.author}}·{{item.min}}</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			list: null,
			other:[],
			title:''
		};
	},
	methods: {
		// 跳转图书详情页面
		toDetail(id) {
			uni.navigateTo({
				url: `/pages/bookDetail/bookDetail?id=${id}`
			});
		},
		backTo() {
			uni.navigateBack({
				delta: 1
			});
		},
		getData(rank) {
			uni.request({
				url: `${getApp().globalData.baseURL}/v1/novel/rank/${rank}`,
				success: res => {
					console.log(res.data.data);
					this.list = res.data.data;
					this.other=res.data.data.length>=3?res.data.data.slice(3):res.data.data
				}
			});
		}
	},
	onLoad(option) {
		console.log(option);
		this.title=['热门榜','新书榜','口碑榜','完结榜'][option.rank-1]
		this.getData(option.rank);
	}
};
</script>

<style lang="scss" scoped>
// 一行显示
.single {
	// width: 100%;
	width: 168rpx;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}
// 图书封面
.cover {
	width: 160rpx;
	border-radius: 0 10rpx 10rpx 0;
}
// 排行榜前三
.hot {
	margin: 20rpx;
	display: flex;
	justify-content: space-around;
	align-items: flex-end;
	> view {
		position: relative;
		width: 200rpx;
	}
}
// 标签
.tag {
	width: 30rpx;
	height: 40rpx;
	color: #fff;
	text-align: center;
	line-height: 40rpx;
	position: absolute;
	top: 0;
	right: 14rpx;
	z-index: 2;
	&::after {
		position: absolute;
		content: '';
		right: 0;
		top: 96%;
		border-style: solid;
		border-width: 0 16rpx 12rpx 15rpx;
	}
}
.tag-one {
	background-color: #ff5700;
	background-image: linear-gradient(0deg, #ff5700 0%, #ff9201 43%);
	&::after {
		border-color: #ff5700 #ff5700 transparent #ff5700; //#FF5700
	}
}
.tag-two {
	right: 50rpx;
	background-color: #ffae01;
	background-image: linear-gradient(0deg, #ffae01 25%, #fee602 100%);
	&::after {
		border-color: #ffae01 #ffae01 transparent #ffae01;
	}
}
.tag-three {
	right: 50rpx;
	background-color: #a8b2bc;
	background-image: linear-gradient(0deg, #a8b2bc 0%, #d0d3d5 100%);
	&::after {
		border-color: #a8b2bc #a8b2bc transparent #a8b2bc;
	}
}
// 排行 其他
// 热门搜索列表
.searchList {
	width: 100%;
	height: 172rpx;
	padding: 20rpx 0;
	// margin: 20rpx;
	display: flex;
	justify-content: space-around;
	align-items: center;
	> view:first-child {
		font-weight: 600;
		font-size: 36rpx;
		padding: 0 10rpx;
	}
	> view:last-child {
		padding-right: 10rpx;
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		height: 100%;
		> view:first-child {
			font-weight: 600;
			font-size: 32rpx;
		}
		> view:nth-child(2) {
			color: #999;
			width: 480rpx;
			overflow: hidden;
			white-space: nowrap;
			text-overflow: ellipsis;
		}
		> view:last-child {
			color: #666;
		}
	}
}
</style>
